<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import ReTitle from '@/components/ReTitle/index.vue'
import { _queryRoles } from '@/api/auth/role'
import { RoleItem } from '@/api/types'
import { useUserStoreHook } from '@/store/modules/user'

const $router = useRouter()
const userStore = useUserStoreHook()

const toPage = (name: string) => {
  $router.push({ name })
}

const roleList = ref<RoleItem[]>([])
const currentRole = ref<number | null>(userStore.userInfo.roleId)
const initRoles = () => {
  console.log('初始化角色')
  _queryRoles().then(res => {
    roleList.value = res.data.list
  })
}

const changeRole = (roleId: number) => {
  const item = roleList.value.find(item => item.id === roleId)
  userStore.changeCurrentRole(item)
}

onMounted(() => {
  initRoles()
})
</script>

<template>
  <div class="p-[20px]">
    <el-form-item label="切换角色：">
      <el-select
        v-model="currentRole"
        style="width: 300px"
        @change="changeRole"
      >
        <el-option
          v-for="item in roleList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>

    <ReTitle title="全局菜单权限"> 注意看左侧菜单变化 </ReTitle>

    <ReTitle title="页面权限">
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="toPage('PermissionPageOne')">
            拥有页面 'PermissionPageOne' 权限
          </el-button>

          <el-button type="warning" @click="toPage('PermissionPageTwo')">
            拥有页面 'PermissionPageTwo' 权限
          </el-button>
        </el-form-item>
      </el-form>

      <router-view />
    </ReTitle>
  </div>
</template>
